Polynomial Easing

$ [0, 1] の範囲で用いるEasing関数のうち、多項式を使うもの

原則、以下の制約を満たす:

$ f(0) = 0.

$ f(1) = 1.

ここではすべて"easeIn"を取り扱うが、もちろん点対称に反転すればeaseOutになります

$ {\rm easeIn}(x) = 1 - {\rm easeOut}(1 - x)

基本形

$ k \geq 1のとき、

$ f(x) = x^k

導関数は$ f'(x) = kx^{(k-1)}

$ kを大きくすればするほど、終点付近の速度が大きくなる

最大速度は$ k

jQueryなどで用いられる easeInQuad だとか easeInCubic だとかはこれですね

始点・終点を一階微分連続にする

始点と終点で速度が0になるよう、追加で以下の制約を設ける:

$ f'(0) = 0.

$ f'(1) = 0.

$ k \geq 2のとき、

$ f(x) = (k + 1)x^{k} - k x^{k + 1}

導関数は$ f'(x) = k (k+1) (x^{(k-1)} - x^k)

$ kを大きくすればするほど、終点直前の速度が大きくなる

最大速度は$ x = \frac{k - 1}{k}のとき

GLSL

code:glsl

float easeIn(float x, float k) {

x = clamp(x, 0.0, 1.0);

return (k + 1.0) * pow(x, k) - k * pow(x, k + 1.0);

}

float easeOut(float x, float k) {

return 1.0 - easeIn(1.0 - x, k);

}

始点・終点を二階微分連続にする

始点と終点で加速度も0になるよう、追加で以下の制約を設ける:

$ f''(0) = 0.

$ f''(1) = 0.

$ k \geq 3のとき、

$ a = \frac{(k+1)^2-(k+1)}{2}

$ b = 1 - (k + 1)^2

$ c = a + k + 1

$ f(x) = ax^{k + 2} + bx^{k + 1} + cx^k